<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-页面进度条</title>
</head>

<body>
    原文链接：https://blog.csdn.net/qq_51602285/article/details/126850899
    实际实现中可将未滚动到顶部的元素设置为透明色，滚动到顶部时变为蓝色。
    <div class="container">
        <h1>优美小短文</h1>
        <div class="sticky"></div>
        <p>寂静的森林里，树木窃窃私语，萤火虫的光不再温暖。鹅卵石铺就的小路上布满了多少人的脚印？我在这里轻轻吟颂着温暖的童话。</p>
        <div class="sticky"></div>
        <p>带着怀表的兔子发着光，领着美丽的爱丽丝，进入神秘的扑克牌仙境，奇妙的经历只是一个梦而已，一切都会结束。</p>
        <div class="sticky"></div>
        <p>冰冷的城墙述说着一个又一个故事，湛蓝的大海是人鱼的眼泪，透明的水晶棺是公主的幸福笑靥，梦幻的蔷薇花翩飞，我的童话又在哪里？</p>
        <div class="sticky"></div>
        <p>山谷里的声音，让痛苦云淡风清，我聆听着古老的篇章，尘封的记忆在苏醒，漫延的泪水变成故事里的曾经。

        </p>
    </div>


    <style>
        .container {
            width: 400px;
            height: 500px;
            overflow: auto;
            margin: 40px auto 40px;
            padding-bottom: 500px;
            box-sizing: border-box;
        }

        .sticky {
            width: 100px;
            height: 10px;
            background: rgba(36, 167, 254, 0.979);
            position: -webkit-sticky;
            position: sticky;
            top: 0;
        }

        .sticky:nth-of-type(2) {
            transform: translateX(100px);
        }

        .sticky:nth-of-type(3) {
            transform: translateX(200px);
        }

        .sticky:nth-of-type(4) {
            transform: translateX(300px);
        }
    </style>
</body>

</html>